<template>
  <div
    class="bg-white dark:bg-zinc-800 sticky top-0 left-0 w-full z-10 duration-500"
  >
    <ul
      class="w-[800px] relative flex flex-wrap justify-center overflow-x-auto px-[10px] py-1 text-xs text-zinc-600 duration-300 overflow-hidden mx-auto"
      :class="isOpen ? 'max-h-[206px]' : 'max-h-[56px]'"
    >
      <!-- 展示箭头 -->
      <div
        class="absolute right-1 bottom-1 z-20 p-1 rounded cursor-pointer duration-200 hover:bg-zinc-200 dark:hover:bg-zinc-900"
        @click="triggerState"
      >
        <z-svg-icon
          class="w-1 h-1"
          :name="isOpen ? 'fold' : 'unfold'"
          fillClass="fill-zinc-900 dark:fill-zinc-300"
        />
      </div>
      <!-- item -->
      <li
        v-for="(item, index) in categorys"
        :key="item.id"
        class="shrink-0 px-1.5 py-0 z-10 duration-200 text-zinc-900 dark:text-zinc-500 dark:hover:text-zinc-300 text-base font-bold h-4 leading-4 cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-900 rounded mr-1 mb-1"
        :class="`${
          currentCategoryIndex === index
            ? 'bg-zinc-200 dark:bg-zinc-900 text-zinc-900 dark:text-zinc-300'
            : ''
        }`"
        @click="onClickItem(item)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useCategoryStore } from '@/store/modules/category'
import { useAppStore } from '@/store/modules/app'
import { storeToRefs } from 'pinia'

const useCategory = useCategoryStore()
const { categorys } = storeToRefs(useCategory)

const useApp = useAppStore()
const { currentCategoryIndex } = storeToRefs(useApp)

/**
 * 是否展开
 * @type {Boolean}
 */
const isOpen = ref(false)
const triggerState = () => {
  isOpen.value = !isOpen.value
}

/**
 * 选中状态
 */
const onClickItem = (item) => {
  useApp.changeCategory(item)
}
</script>

<style lang="scss" scoped></style>
